<template>
  <div class="detail-content-container w-[1440px]  bg-white mx-auto rounded-[4px]  p-[12px]">
    <div class="detail-content-title text-center justify-start text-[#333] text-xl font-medium font-['Source_Han_Sans_CN'] leading-height-[30px]">
      {{ data.title }}
    </div>
    <div class="flex justify-center mx-auto mt-[18px] pb-[18px] border-b-[1px] border-b-[#D9D9D9] text-[#666]">
      <div class="justify-start  text-sm font-normal font-['Source_Han_Sans_CN'] leading-tight">
        {{ t('common.releaseTime') }}:
      </div>
      <div class="justify-start  text-sm font-normal font-['Source_Han_Sans_CN'] leading-tight ">
        {{ data.publishTime }}
      </div>
    </div>
    <div class="content mt-[8px] flex flex-col">
      <div v-html="data.content" />
      <!-- <div class="department flex  flex-col items-end mt-[8px] text-[16px] text-[#333] leading-height-[24px] ">
        <div>{{ data.publisher }}</div>
        <div>{{ data.publishTime }}</div>
      </div> -->
    </div>
    <div class="attachment w-full bg-[#f8f8f8] p-[12px] mt-[18px]">
      <div class="title text-[#333] leading-height-[20px] font-[500] mb-[10px]">
        {{ t('common.attachment') }}
      </div>
      <ul class="attachmentList">
        <li v-for="(item, index) in data.announcementFileList" :key="index" class="flex items-center mb-[12px] last:mb-0">
          <i class="icon eicon eicon-r-l-wenjian" />
          <el-link type="primary" :underline="false" :href="item.attachmentUrl" class="text-[14px] leading-height-[20px] ml-[4px]" target="_blank">
            {{ item.attachmentName }}
          </el-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
})
const { t } = useI18n()
</script>

<style lang="scss" scoped>
.el-link {
  --el-link-font-weight: 400;
}
</style>
